<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">
        <a href="/home">首页</a>
        <a href="/service">服务</a>
        <a href="/mine">个人中心</a>
    </div>
    <div class="content"></div>
</body>
</html>

<script>

    let as = document.querySelectorAll('a');
    as.forEach((item) => {
        item.onclick = function(e) {
            //阻止事件默认行为
            e.preventDefault();
            //history.pushState(历史记录的状态，保留字符串，url地址)
            history.pushState({title:'',url:''},'',this.href);
            switch(location.pathname){
                case '/home':home_page();break;
                case '/service':service_page();break;
                case '/mine':mine_page();break;
            }
        }
    })

    function home_page(){
        document.querySelector('.content').innerHTML = '首页的内容';
    }
    function service_page(){
        document.querySelector('.content').innerHTML = '服务的内容';
    }
    function mine_page(){
        document.querySelector('.content').innerHTML = '个人中心的内容';
    }

</script>